<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Using Lists</title>
<meta name="generator" content="Oracle DARB XHTML Converter (Mode = document) - Version 5.1.2 Build 015" />
<meta name="date" content="2011-11-03T11:27:20Z" />
<meta name="robots" content="noarchive" />
<meta name="doctitle" content="Using Lists" />
<meta name="relnum" content="Release 1.5" />
<meta name="partnum" content="E23376-02" />
<link rel="copyright" href="./dcommon/html/cpyr.htm" title="Copyright" type="text/html" />
<link rel="stylesheet" href="./dcommon/css/blafdoc.css" title="Oracle BLAFDoc" type="text/css" />
<link rel="contents" href="toc.htm" title="Contents" type="text/html" />
<link rel="index" href="index.htm" title="Index" type="text/html" />
<link rel="prev" href="widgets.htm" title="Previous" type="text/html" />
<link rel="next" href="tabletree.htm" title="Next" type="text/html" />
</head>
<body>
<div class="header"><a id="top" name="top"></a>
<div class="zz-skip-header"><a href="#BEGIN">Skip Headers</a></div>
<table class="simple oac_no_warn" summary="" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td align="left" valign="top"><b>Lightweight UI Toolkit Developer's Guide</b><br />
<b>Release 1.5</b><br />
E23376-02</td>
<td valign="bottom" align="right">
<table class="simple oac_no_warn" summary="" cellspacing="0" cellpadding="0" width="225">
<tr>
<td>&nbsp;</td>
<td align="center" valign="top"><a href="toc.htm"><img src="./dcommon/gifs/toc.gif" alt="Go To Table Of Contents" /><br />
<span class="icon">Contents</span></a></td>
<td align="center" valign="top"><a href="index.htm"><img src="./dcommon/gifs/index.gif" alt="Go To Index" /><br />
<span class="icon">Index</span></a></td>
</tr>
</table>
</td>
</tr>
</table>
<hr />
<table class="simple oac_no_warn" summary="" cellspacing="0" cellpadding="0" width="100">
<tr>
<td align="center"><a href="widgets.htm"><img src="./dcommon/gifs/leftnav.gif" alt="Previous" /><br />
<span class="icon">Previous</span></a>&nbsp;</td>
<td align="center"><a href="tabletree.htm"><img src="./dcommon/gifs/rightnav.gif" alt="Next" /><br />
<span class="icon">Next</span></a></td>
<td>&nbsp;</td>
</tr>
</table>
<a name="BEGIN" id="BEGIN"></a></div>
<!-- class="header" -->
<div class="ind"><!-- End Header --><a id="CJBIDAJA" name="CJBIDAJA"></a>
<h1 class="chapter"><span class="secnum">3</span> Using Lists</h1>
<p>Because screen size is limited, lists are the most common basic UI widget on devices. A <a id="sthref68" name="sthref68"></a>List presents the user with a group of items displayed in a single column. The set of elements is rendered using a ListCellRenderer and is extracted using the ListModel. Swing's Model/View/Controller architecture (MVC) makes it possible for a list to represent many UI concepts ranging from a carousel to a To-Do checklist. A list component is relatively simple. It invokes the model in order to extract the displayed or selected information and invokes the cell renderer to show it to the user. The list class itself is completely decoupled from everything, so you can extract its content from any source (for example, the network, storage etcetera) and display the information in any form (for example, Checkboxes, Strings, Icons, and so forth).</p>
<a id="Z400087a1291990" name="Z400087a1291990"></a>
<div class="sect1">
<h2 class="sect1">Initializing a List</h2>
<p>You can create a list in one of four way<a id="sthref69" name="sthref69"></a>s:</p>
<div class="inftblhruleinformal">
<table class="HRuleInformal" summary="Add Summary attribute value here." dir="ltr" border="1" width="100%" frame="hsides" rules="rows" cellpadding="3" cellspacing="0">
<col width="33%" />
<col width="*" />
<tbody>
<tr align="left" valign="top">
<td align="left" id="r1c1-t2"><code>List()</code></td>
<td align="left">Creates a new instance of List with an empty default model.</td>
</tr>
<tr align="left" valign="top">
<td align="left" id="r2c1-t2"><code>List(ListModel model)</code></td>
<td align="left" headers="r2c1-t2">Creates a new instance of List with the given model.</td>
</tr>
<tr align="left" valign="top">
<td align="left" id="r3c1-t2"><code>List(Object[] items)</code></td>
<td align="left" headers="r3c1-t2">Creates a new instance of List with an array of Objects that are placed into the list model.</td>
</tr>
<tr align="left" valign="top">
<td align="left" id="r4c1-t2"><code>List(Vector items)</code></td>
<td align="left" headers="r4c1-t2">Creates a new instance of List where a set of items are placed into the list model.</td>
</tr>
</tbody>
</table>
<br /></div>
<!-- class="inftblhruleinformal" --></div>
<!-- class="sect1" -->
<a id="Z400087a1292000" name="Z400087a1292000"></a>
<div class="sect1">
<h2 class="sect1">Creating a Model</h2>
<p>There are two ways to create a list model:</p>
<div class="inftblhruleinformal">
<table class="HRuleInformal" summary="Add Summary attribute value here." dir="ltr" border="1" width="100%" frame="hsides" rules="rows" cellpadding="3" cellspacing="0">
<col width="27%" />
<col width="*" />
<tbody>
<tr align="left" valign="top">
<td align="left" id="r1c1-t3"><code>ListModel</code></td>
<td align="left">Implement the list model interface (use a general purpose implementation of the list model interface derived from the DefaultListModel)</td>
</tr>
<tr align="left" valign="top">
<td align="left" id="r2c1-t3"><code>DefaultListModel</code></td>
<td align="left" headers="r2c1-t3">Everything is taken care of for you.</td>
</tr>
</tbody>
</table>
<br /></div>
<!-- class="inftblhruleinformal" -->
<a id="Z400087a1291954" name="Z400087a1291954"></a>
<div class="sect2">
<h3 class="sect2">ListModel</h3>
<p>Represents <a id="sthref70" name="sthref70"></a>the data structure of the list, thus allowing a list to represent any potential data source by referencing different implementations of this interface. For example, a list model can be implemented in such a way that it retrieves data directly from storage (although caching is recommended). It is the responsibility of the list to notify observers (specifically the view List of any changes to its state (items removed, added, or changed, and so forth) thus the data is updated on the view.</p>
</div>
<!-- class="sect2" -->
<a id="Z400087a1291959" name="Z400087a1291959"></a>
<div class="sect2">
<h3 class="sect2">DefaultListModel</h3>
<p><a id="sthref71" name="sthref71"></a>The following code demonstrates using the DefaultListModel class with a vector of elements.</p>
<pre xml:space="preserve" class="oac_no_warn">
// Create a set of items
String[] items = { "Red", "Blue", "Green", "Yellow" };
 
// Initialize a default list model with &ldquo;item&rdquo; inside
DefaultListModel myListModel = new DefaultListModel(items);
 
// Creating a List with &ldquo;myListModel&rdquo;
</pre></div>
<!-- class="sect2" --></div>
<!-- class="sect1" -->
<a id="CJBJCFGJ" name="CJBJCFGJ"></a>
<div class="sect1">
<h2 class="sect1">List Cell Renderer</h2>
<p>A list uses an object called a cell renderer to display each of its items. The default cell renderer knows how to display strings and icons and it displays Objects by invoking toString. If you want to change the way the default renderer display icons or strings, or if you want behavior different than what is provided by toString, you can implement a custom cell renderer. You can create a list renderer using ListCellRenderer or DefaultListCellRenderer:</p>
<ul>
<li>
<p><a href="#CJBCDHDJ">ListCellRenderer</a></p>
</li>
<li>
<p><a href="#CJBDFHCB">DefaultListCellRenderer</a></p>
</li>
</ul>
<a id="CJBCDHDJ" name="CJBCDHDJ"></a>
<div class="sect2">
<h3 class="sect2">ListCellRenderer</h3>
<p><a id="sthref72" name="sthref72"></a>ListCellRenderer is a "rubber stamp" tool that allows you to extract a renderer instance (often the same component instance for all invocations) that is initialized to the value of the current item. The renderer instance is used to paint the list and is discarded when the list is complete.</p>
<p>An instance of a renderer can be developed as follows:</p>
<pre xml:space="preserve" class="oac_no_warn">
public class MyYesNoRenderer extends Label implements ListCellRenderer {
   public Component getListCellRendererComponent(List list,
                      Object value, int index, boolean isSelected) {
      if( ((Boolean)value).booleanValue() ) {
        setText("Yes");
      } else {
           setText("No");
      }
        return this;
   }
 
   public Component getListFocusComponent(List list) {
      Label label = new label("");
      label.getStyle().setBgTransparency(100);
 
      return label;
   }
}
</pre>
<p>It is best that the component whose values are manipulated does not support features such as <a id="sthref73" name="sthref73"></a><code>repaint()</code>. This is accomplished by overriding repaint in the subclass with an empty implementation. This is advised for performance reasons, otherwise every change made to the component might trigger a repaint that wouldn't do anything but still cost in terms of processing.</p>
</div>
<!-- class="sect2" -->
<a id="CJBDFHCB" name="CJBDFHCB"></a>
<div class="sect2">
<h3 class="sect2">DefaultListCellRenderer</h3>
<p>The DefaultListCellRender is the default implementation of the renderer based on a Label and the ListCellRenderer interface.</p>
<div class="inftblhruleinformalwide">
<table class="HRuleInformalWide" summary="Add Summary attribute value here." dir="ltr" border="1" width="100%" frame="hsides" rules="rows" cellpadding="3" cellspacing="0">
<col width="36%" />
<col width="*" />
<tbody>
<tr align="left" valign="top">
<td align="left" id="r1c1-t4"><a id="sthref74" name="sthref74"></a><code>getListCellRendererComponent()</code></td>
<td align="left">Returns a component instance that is already set to renderer "value". While it is not a requirement, many renderers often derive from a component (such as a label) and return "this".</td>
</tr>
<tr align="left" valign="top">
<td align="left" id="r2c1-t4"><a id="sthref75" name="sthref75"></a><code>getListFocusComponent()</code></td>
<td align="left" headers="r2c1-t4">Returns a component instance that paints the list focus item. When the selection moves, this component is drawn above the list items. It's best to give some level of transparency (see code example in <a href="#CJBCDHDJ">ListCellRenderer</a>). Once the focused item reaches the cell location then this Component is drawn under the selected item.
<p><span class="bold">Note:</span> To emulate this animation, call <code>List.setSmoothScrolling(true)</code>. This method is optional an implementation can choose to return null</p>
</td>
</tr>
</tbody>
</table>
<br /></div>
<!-- class="inftblhruleinformalwide" --></div>
<!-- class="sect2" --></div>
<!-- class="sect1" -->
<a id="Z400087a1292020" name="Z400087a1292020"></a>
<div class="sect1">
<h2 class="sect1">Adding Items to and Removing Items From a List</h2>
<p>You can add items to a list in one of two ways. The first way is to create a ListModel and add it to the list, either when initiating a List or using the method <a id="sthref76" name="sthref76"></a><code>setModel(ListModel model</code>). To remove an item or all items from a List, use <code>removeItem(int index)</code> or <a id="sthref77" name="sthref77"></a><code>removeAll()</code> methods. For example:</p>
<pre xml:space="preserve" class="oac_no_warn">
// Adding to a list using above DefaultListModel snipped code or:
....
myListModel.addItem(&ldquo;New Item&rdquo;);
 
// Removing is done by
....
myListModel.removeItem(index);
// or
myListModel.removeAll();
</pre></div>
<!-- class="sect1" -->
<a id="Z400087a1292030" name="Z400087a1292030"></a>
<div class="sect1">
<h2 class="sect1">List Events</h2>
<p>Two types of events are supported here, ActionEvent and SelectionsListener in addition to <a id="sthref78" name="sthref78"></a><code>addFocusListener(FocusListener l)</code> that is inherited from Component. ActionEvent binds a listener to the user selection action, and the SelectionListener is bound to the List model selection listener. The listener bindings mean you can track changes in values inside the Model.</p>
<a id="Z400087a1291982" name="Z400087a1291982"></a>
<div class="sect2">
<h3 class="sect2">Fixed Selection Feature</h3>
<p>The fixed selection feature supports a dynamic versus static item movement in a List. In a Java SE environment the list items are typically static and the selection indicator travels up and down the list, highlighting the currently selected item. The Lightweight UI Toolkit introduces a new animation feature that lets the selection be static while the items move dynamically up and down. To indicate the fixed selection type, use <a id="sthref79" name="sthref79"></a><code>setFixedSelection(int fixedSelection)</code> where <code>fixedSelection</code> can be one of the following:</p>
<div class="inftblhruleinformal">
<table class="HRuleInformal" summary="Add Summary attribute value here." dir="ltr" border="1" width="100%" frame="hsides" rules="rows" cellpadding="3" cellspacing="0">
<col width="21%" />
<col width="*" />
<tbody>
<tr align="left" valign="top">
<td align="left" id="r1c1-t5"><code>FIXED_NONE</code></td>
<td align="left">Behave as the normal (Java SE) List behaves. List items are static and the selection indicator travels up and down the list, highlighting the currently selected item.</td>
</tr>
<tr align="left" valign="top">
<td align="left" id="r2c1-t5"><code>FIXED_TRAIL</code></td>
<td align="left" headers="r2c1-t5">The last visible item in the list is static and list items move up and down.</td>
</tr>
<tr align="left" valign="top">
<td align="left" id="r3c1-t5"><code>FIXED_LEAD</code></td>
<td align="left" headers="r3c1-t5">The first item in the list is static and list items move up and down.</td>
</tr>
<tr align="left" valign="top">
<td align="left" id="r4c1-t5"><code>FIXED_CENTER</code></td>
<td align="left" headers="r4c1-t5">The middle item in the list is static and list items are move up and down.</td>
</tr>
</tbody>
</table>
<br /></div>
<!-- class="inftblhruleinformal" --></div>
<!-- class="sect2" --></div>
<!-- class="sect1" -->
<a id="Z4000dea1292260" name="Z4000dea1292260"></a>
<div class="sect1">
<h2 class="sect1">Tickers in List</h2>
<p>Because list items are essentially rendered as a rubber stamp they can't be treated as typical LWUIT components. Things such as binding event listeners to the components in the list won't work since the list reuses the same component to draw all the entries.</p>
<p>Features such as tickering an individual cell are often requested and the solution isn't trivial because what we need to do is essentially "ticker the List" <a id="sthref80" name="sthref80"></a>not the renderer.</p>
<p>The sample below tickers a renderer by registering itself as an animation in the parent form and calling the list's repaint method to ticker. Notice that it has a separate entry for the selected list item otherwise the entire content of the list would constantly ticker.</p>
<div class="example"><a id="Z40022e81356127" name="Z40022e81356127"></a>
<p class="titleinexample">Example 3-1 Tickering a Renderer</p>
<pre xml:space="preserve" class="oac_no_warn">
class TickerRenderer extends DefaultListCellRenderer {
   private DefaultListCellRenderer selectedRenderer = new
            DefaultListCellRenderer(false);
   private List parentList;   public TickerRenderer() 
      super(false);
   }
 
   public boolean animate() {
      if(parentList != null &amp;&amp; parentList.getComponentForm() != null) {
         if(selectedRenderer.isTickerRunning()) {
            if(selectedRenderer.animate()) {
               parentList.repaint();
            }
         }
      }
      return super.animate()
  }
   public Component getListCellRendererComponent(List list, Object value, int
                      index, boolean isSelected) {
       if(isSelected) {          selectedRenderer.getListCellRendererComponent(list, value, index,
                                                             isSelected);
          // sometimes the list asks for a dummy selected value for size 
          // calculations and this might break the tickering state
          if(index == list.getSelectedIndex()) {
              if(selectedRenderer.shouldTickerStart()) {
                  if(!selectedRenderer.isTickerRunning()) {
                      parentList = list;
                      list.getComponentForm().registerAnimated(this);
                    selectedRenderer.startTicker(UIManager.getInstance().
                                      getLookAndFeel().getTickerSpeed(), true);
               }           } else {
               if(selectedRenderer.isTickerRunning()) {
                 selectedRenderer.stopTicker();
               }
             }
          }
          return selectedRenderer;
      } else {
          return super.getListCellRendererComponent(list,value,index,                                                     isSelected);
      }
   }
}
</pre></div>
<!-- class="example" --></div>
<!-- class="sect1" -->
<div class="sect1"><!-- infolevel="all" infotype="General" --><a id="sthref81" name="sthref81"></a>
<h2 class="sect1">Generic List Cell Renderer</h2>
<p>GenericListCellRenderer<a id="sthref82" name="sthref82"></a> is a renderer designed to be as simple to use as a Component-Container hierarchy. This single class supports most of the common use cases. To GenericListCellRenderer assumes the model contains only <code>Hashtable</code> objects. Since Hashtables can contain arbitrary data, the list model is still quite generic and allows application-specific data storage. Furthermore, a Hashtable can still be derived and extended to provide domain-specific business logic.<a id="sthref83" name="sthref83"></a></p>
<div class="sect2"><a id="sthref84" name="sthref84"></a>
<h3 class="sect2">Mapping Components to Hashtable Entries</h3>
<p>The GenericListCellRenderer accepts two Container instances and maps them to individual Hashtable entries within the model by finding the appropriate components within the given Container hierarchy.</p>
<p>Components are mapped to the Hashtable entries based on the name property<a id="sthref85" name="sthref85"></a> of the component (<code>getName</code> , <code>setName</code>) and the key value<a id="sthref86" name="sthref86"></a> within the Hashtable.</p>
<p>Assume a model that contains a Hashtable entry like this:</p>
<pre xml:space="preserve" class="oac_no_warn">
"Foo": "Bar"
"X": "Y"
"Not": "Applicable"
"Number": Integer(1)
</pre>
<p>In this model a renderer loops over the component hierarchy in the Container searching for components whose name matches Foo, X, Not and Number and assigns the appropriate value to them. Notice that if you use image objects as values they are assigned to labels as expected. You can't assign both an image and text to a single label because a key takes only one object. Two labels can be used quite easily in this case.</p>
<p>Even better, the renderer supports list tickering when appropriate, and if a CheckBox appears within the renderer it seamlessly toggles a boolean flag within the Hashtable.</p>
<p>If a value is missing from the Hashtable it is treated as empty and the component is reset. This is an issue if you hardcode an image or text within the renderer and you don't want it replaced. To ensure a component is preserved, use the <code>setName</code> <a id="sthref87" name="sthref87"></a>property to append <code>Fixed</code> <a id="sthref88" name="sthref88"></a>to the name. For example: Given an <code>address</code>, specify:</p>
<p><code>address.setName("addressFixed");</code></p>
<p>Naming a component within the renderer with $<span class="italic">number</span> will automatically set it as a counter component for the offset of the component within the list. For example:</p>
<p><code>c.mycomponent("Idate$1");</code></p>
<p>Styling the GenericListCellRenderer is slightly different. The renderer uses the UIID of the Container passed to the generic list cell renderer and the background focus uses that same UIID with the word "Focus" appended. For example:</p>
<p><code>c.setUIID("ListRendererFocused");</code></p>
</div>
<!-- class="sect2" -->
<div class="sect2"><a id="sthref89" name="sthref89"></a>
<h3 class="sect2">Focus for Tickering and Fisheye</h3>
<p>It is important to notice that the generic list cell renderer will grant focus to the child components of the selected entry if they are focusable, thus changing the style of said entries. For example, a Container might have a child label that has one style when the parent Container is unselected and another when it is selected (focused). This can be easily achieved by defining the label as focusable. Notice that the component will never receive direct focus since it is still a part of a renderer.</p>
<p>Because the generic list cell renderer accepts two or four instances of a Container, the renderer can treat the selected entry differently which is very important for tickering.</p>
<p>It might not be practical to seamlessly clone the Container instances for the renderer's needs, so LWUIT expects the developer to provide two separate instances. This is essential for tickering; there must be separate instances, even if they are identical.</p>
<p>The renderer also supports a fisheye effect in which the selected entry is actually different from the unselected entry in its structure. This behavior supports a pinstripe effect where odd and even rows can have different styles. For example to get a pinstripe effect, provide 4 instances of the Containers and selected and unselected values for odd and even rows.</p>
</div>
<!-- class="sect2" -->
<div class="sect2"><a id="sthref90" name="sthref90"></a>
<h3 class="sect2">Hashtable Sample</h3>
<p>The best way to learn about the generic list cell renderer and the Hashtable model is by playing with them in the GUI builder, however they can be used in code without any dependency on the GUI builder.</p>
<div class="example"><a id="sthref91" name="sthref91"></a>
<p class="titleinexample">Example 3-2 List With Checkboxes</p>
<p>Here is a simple sample for a list with checkboxes that get updated automatically:</p>
<pre xml:space="preserve" class="oac_no_warn">
List list = new List(createGenericListCellRendererModelData());
list.setRenderer(new GenericListCellRenderer(createGenericRendererContainer(), createGenericRendererContainer()));
private Container createGenericRendererContainer() {
   Container c = new Container(new BorderLayout());
   c.setUIID("ListRenderer");
   Label name = new Label();
   name.setFocusable(true);
   name.setName("Name");
   c.addComponent(BorderLayout.CENTER, name);    
   Label surname = new Label();
   surname.setFocusable(true); 
   surname.setName("Surname");
   c.addComponent(BorderLayout.SOUTH, surname);
   CheckBox selected = new CheckBox();
   selected.setName("Selected");
   selected.setFocusable(true);
   c.addComponent(BorderLayout.WEST, selected);
   return c;}
private Hashtable[] createGenericListCellRendererModelData() {
   Hashtable[] data = new Hashtable[5];
   data[0] = new Hashtable();
   data[0].put("Name", "Shai");
   data[0].put("Surname", "Almog");
   data[0].put("Selected", Boolean.TRUE);
   data[1] = new Hashtable();
   data[1].put("Name", "Chen");
   data[1].put("Surname", "Fishbein");
   data[1].put("Selected", Boolean.TRUE);
   data[2] = new Hashtable();
   data[2].put("Name", "Ofir");
   data[2].put("Surname", "Leitner");
   data[3] = new Hashtable();
   data[3].put("Name", "Yaniv");
   data[3].put("Surname", "Vakarat");
   data[4] = new Hashtable();
   data[4].put("Name", "Meirav");
   data[4].put("Surname", "Nachmanovitch");
   return data;}
</pre></div>
<!-- class="example" --></div>
<!-- class="sect2" --></div>
<!-- class="sect1" --></div>
<!-- class="ind" -->
<!-- Start Footer -->
<div class="footer">
<hr />
<table class="simple oac_no_warn" summary="" cellspacing="0" cellpadding="0" width="100%">
<col width="33%" />
<col width="*" />
<col width="33%" />
<tr>
<td valign="bottom">
<table class="simple oac_no_warn" summary="" cellspacing="0" cellpadding="0" width="100">
<col width="*" />
<col width="48%" />
<col width="48%" />
<tr>
<td>&nbsp;</td>
<td align="center"><a href="widgets.htm"><img src="./dcommon/gifs/leftnav.gif" alt="Previous" /><br />
<span class="icon">Previous</span></a>&nbsp;</td>
<td align="center"><a href="tabletree.htm"><img src="./dcommon/gifs/rightnav.gif" alt="Next" /><br />
<span class="icon">Next</span></a></td>
</tr>
</table>
</td>
<td class="copyrightlogo"><img class="copyrightlogo" src="./dcommon/gifs/oracle.gif" alt="Oracle Logo" /><br />
<span class="copyrightlogo">Copyright&nbsp;&copy;&nbsp;2008, 2011,&nbsp;Oracle&nbsp;and/or&nbsp;its&nbsp;affiliates.&nbsp;All&nbsp;rights&nbsp;reserved.</span> <a href="./dcommon/html/cpyr.htm"><br />
<span class="copyrightlogo">Legal Notices</span></a></td>
<td valign="bottom" align="right">
<table class="simple oac_no_warn" summary="" cellspacing="0" cellpadding="0" width="225">
<tr>
<td>&nbsp;</td>
<td align="center" valign="top"><a href="toc.htm"><img src="./dcommon/gifs/toc.gif" alt="Go To Table Of Contents" /><br />
<span class="icon">Contents</span></a></td>
<td align="center" valign="top"><a href="index.htm"><img src="./dcommon/gifs/index.gif" alt="Go To Index" /><br />
<span class="icon">Index</span></a></td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!-- class="footer" -->
</body>
</html>
